<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="适用对象">
          <a-radio-group v-decorator="['applicableObject', validatorRules.applicableObject]">
            <a-radio value="1">
              企业内部
            </a-radio>
            <a-radio value="2">
              企业外部
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="规则名称"
          >
          <a-input placeholder="请输入规则名称" v-decorator="['signConfigName', validatorRules.signConfigName]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="规则类型">
          <a-radio-group v-decorator="['signConfigType', validatorRules.signConfigType]">
            <a-radio value="1">
              固定时间上下班
            </a-radio>
            <a-radio value="2">
              自由时间上下班
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <h4 style="margin-right: 5px;font-weight: 700;font-size: 18px">打卡范围</h4>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="组织" required>
          <a-button icon="plus" type="primary" @click="selectOrg(orgDataSources)">添加组织</a-button>
          <a-table
            bordered
            :scroll="{
                    x:'max-content'
                  }"
            tableLayout='auto'
            rowKey="orgCode"
            :columns="orgColumns"
            :dataSource="orgDataSources"
            :pagination="false"
            ref='table'
            size='middle'
          >
            <template slot='action' slot-scope='text, record, index'>
              <a @click='orgDelet(record)'>删除</a>
            </template>
          </a-table>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="职位级别" required>
          <a-button icon="plus" type="primary" @click="selectPositionLevel(positionLevelDataSources)">添加职位级别</a-button>
          <a-table
            bordered
            :scroll="{
                    x:'max-content'
                  }"
            tableLayout='auto'
            rowKey="positionLevelCode"
            :columns="positionLevelColumns"
            :dataSource="positionLevelDataSources"
            :pagination="false"
            ref='table'
            size='middle'
          >
            <template slot='action' slot-scope='text, record, index'>
              <a @click='positionLevelDelet(record)'>删除</a>
            </template>
          </a-table>
        </a-form-item>

      </a-form>
    </a-spin>


    <org-modal @orgList="orgList" ref="OrgModal"></org-modal>

    <position-level-modal @positionLevelList="positionLevelList" ref="PositionLevelModal"></position-level-modal>

  </j-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import VcTimePicker from 'ant-design-vue/es/vc-time-picker/TimePicker'
  import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
  import JTreeSelect from '@/components/cn-form/JTreeSelect'
  import orgModal from './orgModal'
  import PositionLevelModal from './PositionLevelModal'

  export default {
    name: 'SfaSignConfigModal',
    components: { ARangePicker, VcTimePicker, JTreeSelect, orgModal, PositionLevelModal },
    data() {
      return {
        record: null,
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {

          applicableObject: {
            rules: [{
              required: true, message: '请选择适用对象!', trigger: 'submit'
            }]
          },

          signConfigName: {
            rules: [{
              required: true, message: '请输入规则名称!', trigger: 'submit'
            }]
          },

          signConfigType: {
            rules: [{
              required: true, message: '请选择规则类型!', trigger: 'submit'
            }]
          },

          signInStart: {
            rules: [{
              required: true, message: '请选择签到开始时间!', trigger: 'submit'
            }]
          },

          signInEnd: {
            rules: [{
              required: true, message: '请选择签到结束时间!', trigger: 'submit'
            }]
          },

          signOutStart: {
            rules: [{
              required: true, message: '请选择签退开始时间!', trigger: 'submit'
            }]
          },

          signOutEnd: {
            rules: [{
              required: true, message: '请选择签退结束时间!', trigger: 'submit'
            }]
          },

          signOrgCode: {
            rules: [{
              required: true, message: '请选择组织!'
            }]
          },

          status: {
            rules: [{
              required: true, message: '请选择状态!'
            }]
          }

        },
        url: {
          add: window._CONFIG['domianSfaURL'] + '/sfaSignConfigNew/saveOrUpdate'
        },

        titles: '',

        orgs: {},
        originOrg: '',
        orgDataSources: [],
        orgColumns: [
          {
            title: '组织编码',
            align: 'center',
            dataIndex: 'orgCode'
          },
          {
            title: '组织名称',
            align: 'center',
            dataIndex: 'orgName'
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'action',
            width: 80,
            ellipsis: true,
            scopedSlots: { customRender: 'action' }
          }
        ],

        positionLevels: {},
        originPositionLevel: '',
        positionLevelDataSources: [],
        positionLevelColumns: [
          {
            title: '职位级别编码',
            align: 'center',
            dataIndex: 'positionLevelCode'
          },
          {
            title: '职位级别名称',
            align: 'center',
            dataIndex: 'positionLevelName'
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'action',
            width: 80,
            ellipsis: true,
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    methods: {

      // 获取组织
      selectOrg(type) {
        this.$refs.OrgModal.showModal(type)
      },
      // 删除行内组织
      orgDelet(key) {
        const orgDataSources = [...this.orgDataSources]
        this.orgDataSources = orgDataSources.filter(item => item !== key)
        this.originOrg = ''
      },
      orgList(value) {
        this.orgDataSources = value
        this.$message.success('添加组织成功')
      },

      // 获取组织
      selectPositionLevel(type) {
        this.$refs.PositionLevelModal.showModal(type)
      },
      // 删除行内职位级别
      positionLevelDelet(key) {
        const positionLevelDataSources = [...this.positionLevelDataSources]
        this.positionLevelDataSources = positionLevelDataSources.filter(item => item !== key)
        this.originPositionLevel = ''
      },
      positionLevelList(value) {
        this.positionLevelDataSources = value
        this.$message.success('添加职位级别成功')
      },

      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true
        this.model.isRoll = this.model.isRoll + ''
        this.model.isControl = this.model.isControl + ''
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'remarks', 'signInStart', 'signInEnd',
            'signOutStart', 'signOutEnd', 'status', 'signOrgCode', 'signOrgName'))
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.positionLevelDataSources = []
        this.orgDataSources = []
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            httpurl += this.url.add
            let method = ''
            method = 'post'
            let formData = Object.assign(this.model, values)
            //时间格式化
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        })
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style scoped>

</style>